<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>费用报销</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../layui/css/layui.css"  media="all">
	<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<script src="../../js/jquery-3.4.1.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<body style="padding: 10px;background-color: rgb(236,240,245);">
	<h1 style="margin-bottom: 20px;">费用报销</h1>
	<!-- 表单区+返回按钮 -->
	<div style="background-color: white;">
		<div class="layui-row">
			<!-- 返回按钮 -->
			<div class="layui-col-xs1" style="padding-left: 10px;padding-top: 10px;">
				<button type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon layui-icon-left"></i>返回</button>
			</div>
		</div>
		<!-- 蓝色分割线 -->
		<hr class="layui-bg-blue">
		<h1 style="text-align: center;margin-bottom: 50px;">费用报销单</h1>
		<form class="layui-form layui-form-pane" action="" style="padding-left: 110px;">
			<!-- 第一排 -->
			<div class="layui-form-item">
				<div class="layui-inline" style="width: 45%">
					<label class="layui-form-label">标题</label>
					<div class="layui-input-block">
						<input name="title" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline" style="width: 45%">
					<label class="layui-form-label">紧急程度</label>
					<div class="layui-input-block">
						<select name="city" lay-verify="required">
							<option value=""></option>
						</select>
					</div>
				</div>
			</div>
			<!-- 第二排 -->
			<div class="layui-form-item">
				<div class="layui-inline" style="width: 45%">
					<label class="layui-form-label">提单人员</label>
					<div class="layui-input-block">
						<input name="title" placeholder="" readonly="readonly" autocomplete="off" class="layui-input" value="自己">
					</div>
				</div>
				<div class="layui-inline" style="width: 45%">
					<label class="layui-form-label">证明人</label>
					<div class="layui-input-block">
						<input name="title" required readonly lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
						<button type="button" class="layui-btn layui-btn-xs" onclick="openUser()" style="position: absolute;top: 8px;right: 10px">添加</button>
					</div>
				</div>
			</div>
			<!-- 第三排 -->
			<div class="layui-form-item">
				<div class="layui-inline" style="width: 45%">
					<label class="layui-form-label">相关客户</label>
					<div class="layui-input-block">
						<input name="title" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline" style="width: 45%">
					<label class="layui-form-label">报销方式</label>
					<div class="layui-input-block">
						<select name="city">
							<option value=""></option>
						</select>
					</div>
				</div>
			</div>
			<!-- 第四排 -->
			<div class="layui-form-item">
				<div class="layui-inline" style="width: 45%;">
					<label class="layui-form-label">描述</label>
					<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
				</div>
				<div class="layui-inline" style="width: 45%;margin-top: -100px;">
					<label class="layui-form-label">审核人员</label>
					<div class="layui-input-block">
						<input name="title" required readonly lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
						<button type="button" class="layui-btn layui-btn-xs" onclick="openUser()" style="position: absolute;top: 8px;right: 10px">添加</button>
					</div>
				</div>
			</div>
			<!-- 第五排 -->
			<div class="layui-form-item">
				<div>
					<h4 style="float: left;">报销明细</h4>
					<div style="float: right;margin-right: 90px;">
						<button type="button" onclick="addBurseDetails()"><i class="layui-icon layui-icon-addition"></i></button>
						<button type="button" onclick="removeSeleced()"><i class="layui-icon layui-icon-subtraction"></i></button>
					</div>
				</div>
				<!-- 报销明细表格 -->
				<table id="tb" class="layui-table" style="width: 90%;">
					<thead>
						<tr>
							<th>选择</th>
							<th>费用日期</th>
							<th>费用科目</th>
							<th>费用说明</th>
							<th>票据张数</th>
							<th>报销金额</th>
						</tr>
					</thead>
					<tbody>
						<tr id="row1">
							<td><input value="1" class="chk" type="checkbox" lay-ignore></td>
							<td><input name="" class="layui-input" id="test1"></td>
							<td>
								<select name="city" lay-ignore style="35px">
									<option value="0">请选择</option>
								</select>
							</td>
							<td><input name="" autocomplete="off" class="layui-input"></td>
							<td><input name="" autocomplete="off" class="layui-input"></td>
							<td><input name="" autocomplete="off" class="layui-input"></td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- 功能按钮 -->
			<div class="layui-form-item" style="padding: 15px 0;text-align: center;">
				<div class="layui-inline">
					<button class="layui-btn" lay-submit lay-filter="submitBtn">保存</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
</body>
<script>
	//全局变量：报销明细表行数，默认1行
	var rows = 1;
	//form模块
	layui.use('form', function(){
	  var form = layui.form;
	  
	  //监听提交
	  form.on('submit(submitBtn)', function(data){
	    layer.msg(JSON.stringify(data.field));
	    return false;
	  });
	});
	
	//日历模块
	layui.use('laydate', function(){
	  var laydate = layui.laydate;
	  
	  //执行一个laydate实例
	  laydate.render({
	    elem: '#test1' ,//指定元素
		value: new Date(),//初始值
		type: 'datetime'
	  });
	});
	
	/**
	 * 给报销明细表，增加一行
	 */
	function addBurseDetails(){
		rows += 1;
		$("#tb").append("<tr id='row"+rows+"'>"
							+"<td><input class='chk' type='checkbox' style='display:block' value='"+rows+"'/></td>"
							+"<td><input name='' class='layui-input' id='test"+rows+"'></td>"
							+"<td>"
								+"<select name='city' lay-ignore style='35px'>"
									+"<option value='0'>请选择</option>"
								+"</select>"
							+"</td>"
							+"<td><input name='' autocomplete='off' class='layui-input'></td>"
							+"<td><input name='' autocomplete='off' class='layui-input'></td>"
							+"<td><input name='' autocomplete='off' class='layui-input'></td>"
						+"</tr>");
		layui.laydate.render({
		  elem: '#test'+rows ,//指定元素
				value: new Date(),//初始值
				type: 'datetime'
		});
	}
	
	/**
	 * 删除选中的行
	 */
	function removeSeleced(){
		
		//总行数
		var len = $("#tb").find("tr").length - 1;
		//checkbox标签
		var chks = document.getElementsByClassName("chk");
		
		var needRemoveRows = [];
		//从第一行开始遍历，记录需要被删除的行
		for(i = 1; i <= len; i++){
			//如果被选中，则删除这一行
			if(chks[i-1].checked){
				
				needRemoveRows.push(chks[i-1].value);
			}
		}
		//删除需要被删除的行数
		len = needRemoveRows.length;
		for(i = 0; i <= len; i++){
			
			$("#row"+needRemoveRows[i]).remove();
		}
	}

	function openUser() {

		layer.open({
			type: 2,//弹出一个iframe层
			content: 'userList.html',
			area: ['900px', '500px'],
			btn: ['确定', '取消'],
			yes:function (index, layero) {
				//弹出层body的jQuery对象
				var body = layer.getChildFrame("body",index);
			}
		});
	}
</script>
</html>